$(function(){
    initMap();
});
var map, district, polygons = [], citycode;
var citySelect = document.getElementById('city');
var districtSelect = document.getElementById('district');
//初始化页面地图
function initMap() {

    map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        center: [116.30946, 39.937629],
        zoom: 13
    });
    addMarker();
}

//添加marker标记
function addMarker() {
        map.clearMap();
        var marker = new AMap.Marker({
            map: map,
            position: [116.405467, 39.907761],
            icon: new AMap.Icon({
                size: new AMap.Size(52, 50),  //图标大小
                image: "car.png",
                imageOffset: new AMap.Pixel(0, 10)
            })
        });
        var marker1 = new AMap.Marker({
            map: map,
            position: [116.3253021240, 39.9253378161],
            icon: new AMap.Icon({
                size: new AMap.Size(52, 50),  //图标大小
                image: "car.png",
                imageOffset: new AMap.Pixel(0, 10)
            })
        });
        var marker2 = new AMap.Marker({
            map: map,
            position: [116.3434982300, 39.9516615370],
            icon: new AMap.Icon({
                size: new AMap.Size(52, 50),  //图标大小
                image: "car.png",
                imageOffset: new AMap.Pixel(0, 10)
            })
        });
        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker.getPosition());
            //infoWindow.open(map, marker1.getPosition());
            //infoWindow.open(map, marker2.getPosition());
        });
        AMap.event.addListener(marker1, 'click', function() {
            //infoWindow.open(map, marker.getPosition());
            infoWindow.open(map, marker1.getPosition());
            //infoWindow.open(map, marker2.getPosition());
        });
        AMap.event.addListener(marker2, 'click', function() {
            //infoWindow.open(map, marker.getPosition());
            //infoWindow.open(map, marker1.getPosition());
            infoWindow.open(map, marker2.getPosition());
        });
    }

//实例化信息窗体
    var title = '<div><h4>车体实时信息</h4></div>',
        content = [];
    content.push("<span>通信状态:正常</span>        <span>车辆状态:告警</span>");
    content.push("<div>基本信息</div>");
    content.push("<div><table><tr><td>姓名:周杰伦</td><td>车牌号:京A010</td></tr><tr><td>联系电话:1355555555</td><td> </td></tr></table></div>");
    content.push("<div>车体实时信息</div>");
    content.push("<div><table border='1px'><tr><td>剩余电量:72.5kWh</td><td>SOC:80%</td></tr><tr><td>门磁:关闭</td><td>冷藏温度:3℃/3℃/3℃</td></tr><tr><td>冷库湿度:5RH</td><td> </td></tr></table></div>");
    content.push("<div>实时告警信息</div>");
    content.push("<div><table><tr><td>2017-06-30 12:12:34 冷藏箱报警 温度超标</td><td> </td></tr><tr><td>2017-06-30 12:12:35 冷藏箱报警 温度超标</td><td> </td></tr></table></div>");
    content.push("<a href='#'>更多信息</a>");
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });

//构建自定义信息窗体
function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "info";

        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "300px";
        // info.style.height="400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "http://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "http://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
       // console.log(info);
        return info;
    }

//关闭信息窗体
function closeInfoWindow() {
        map.clearInfoWindow();
    }

    //行政区划查询
    var opts = {
        subdistrict: 1,   //返回下一级行政区
        showbiz:false  //最后一级返回街道信息
    };
    district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
    district.search('中国', function(status, result) {
        if(status=='complete'){
            getData(result.districtList[0]);
        }
    });
function getData(data,level) {
       // console.log(level);
        //console.log(data);
        var bounds = data.boundaries;
        //console.log(bounds);
        if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
                var polygon = new AMap.Polygon({
                    map: map,
                    strokeWeight: 1,
                    strokeColor: '#CC66CC',
                    fillColor: '#CCF3FF',
                    fillOpacity: 0.5,
                    path: bounds[i]
                });
                polygons.push(polygon);
            }
            map.setFitView();//地图自适应
        }

        //清空下一级别的下拉列表
        if (level === 'province') {
            citySelect.innerHTML = '';
            districtSelect.innerHTML = '';

        } else if (level === 'city') {
            districtSelect.innerHTML = '';

        }

        var subList = data.districtList;
        if (subList) {
            var contentSub = new Option('--请选择--');
            var curlevel = subList[0].level;
            var curList =  document.querySelector('#' + curlevel);
            //console.log(curList);
            if(curList!=null){
                curList.add(contentSub);
                for (var i = 0, l = subList.length; i < l; i++) {
                    var name = subList[i].name;
                    var levelSub = subList[i].level;
                    var cityCode = subList[i].citycode;
                    contentSub = new Option(name);
                    contentSub.setAttribute("value", levelSub);
                    contentSub.center = subList[i].center;
                    contentSub.adcode = subList[i].adcode;
                    curList.add(contentSub);
                }
            }

        }

    }
    function search(obj) {
        //清除地图上所有覆盖物
        for (var i = 0, l = polygons.length; i < l; i++) {
            polygons[i].setMap(null);
        }
        var option = obj[obj.options.selectedIndex];

        var keyword = option.text; //关键字
        var adcode = option.adcode;
        district.setLevel(option.value); //行政区级别
        district.setExtensions('all');
        //行政区查询
        //按照adcode进行查询可以保证数据返回的唯一性
        district.search(adcode, function(status, result) {
            if(status === 'complete'){
                getData(result.districtList[0],obj.id);
            }
        });
    }
